﻿/************************************************************************
* RECORD-ACTIONS extension for jTable                                          *
*************************************************************************/
(function ($) {

    //Reference to base object members
    var base = {
        _initializeFields: $.hik.jtable.prototype._initializeFields,
        _onRecordsLoaded: $.hik.jtable.prototype._onRecordsLoaded
    };

    //extension members
    $.extend(true, $.hik.jtable.prototype, {

        /************************************************************************
        * OVERRIDED METHODS                                                     *
        *************************************************************************/

        /* Overrides base method to create record-actions field type.
        *************************************************************************/
        _initializeFields: function () {
            base._initializeFields.apply(this, arguments);

            var self = this;

            self._extraFieldTypes.push({
                type: 'record-actions',
                creator: function (record, field) {
                    return self._createRecordActionsDropdown(record, field);
                }
            });
        },

        /* Overrides base method to handle dropdown menu overflow.
        *************************************************************************/
        _onRecordsLoaded: function () {
            base._onRecordsLoaded.apply(this, arguments);

            var self = this;
            self._$tableBody.find('div.dropdown').on('show.bs.dropdown', function (e) {
                var $this = $(this);

                if (!$this.data('_tether')) {
                    var $dropdownButton = $this.find('.dropdown-toggle');
                    var $dropdownMenu = $this.find('.dropdown-menu');

                    $dropdownMenu.css({
                        'display': 'block'
                    });

                    $this.data('_tether', new Tether({
                        element: $dropdownMenu[0],
                        target: $dropdownButton[0],
                        attachment: 'top left',
                        targetAttachment: 'bottom left',
                        constraints: [{
                            to: 'window',
                            attachment: 'together',
                            pin: true
                        }]
                    }));
                }

                var $dropdownMenu = $($this.data('_tether').element);
                $dropdownMenu.css({
                    'display': 'block'
                });
            }).on('hidden.bs.dropdown', function (e) {
                var $this = $(this);
                var $dropdownMenu = $($this.data('_tether').element);
                $dropdownMenu.css({
                    'display': 'none'
                });
            });
        },

        /************************************************************************
        * PRIVATE METHODS                                                       *
        *************************************************************************/

        /* Builds the dropdown actions button according to field definition
        *************************************************************************/
        _createRecordActionsDropdown: function (record, field) {
            var self = this;
            var $dropdownContainer = $('<div></div>')
                                        .addClass('btn-group')
                                        .addClass('dropdown');

            var $dropdownButton = $('<button></button>')
                                        .html(field.text)
                                        .addClass('dropdown-toggle')
                                        .attr('data-toggle', 'dropdown')
                                        .attr('aria-haspopup', 'true')
                                        .attr('aria-expanded', 'true');

            if (field.cssClass) {
                $dropdownButton.addClass(field.cssClass);
            }

            var $dropdownItemsContainer = $('<ul></ul>').addClass('dropdown-menu');
            for (var i = 0; i < field.items.length; i++) {
                var fieldItem = field.items[i];

                if (fieldItem.visible && !fieldItem.visible({ record: record })) {
                    continue;
                }

                var $dropdownItem = self._createDropdownItem(record, fieldItem);

                if (fieldItem.enabled && !fieldItem.enabled({ record: record })) {
                    $dropdownItem.addClass('disabled');
                }

                $dropdownItem.appendTo($dropdownItemsContainer);
            }

            if ($dropdownItemsContainer.find('li').length > 0) {
                $dropdownItemsContainer.appendTo($dropdownContainer);
                $dropdownButton.appendTo($dropdownContainer);
            }

            return $dropdownContainer;
        },

        _createDropdownItem: function (record, fieldItem) {
            var $li = $('<li></li>');
            var $a = $('<a></a>');

            if (fieldItem.text) {
                $a.html(fieldItem.text);
            }

            if (fieldItem.action) {
                $a.click(function (e) {
                    e.preventDefault();
                    
                    if (!$(this).closest('li').hasClass('disabled')) {
                        fieldItem.action({
                            record: record
                        });
                    }
                });
            }

            $a.appendTo($li);
            return $li;
        }

    });

})(jQuery);